<template>
  <div id="div">
    
    <select id="item" ref="item">
      <option value="wangluo">网络</option>
      <option value="biji">笔记</option>
      <option value="jushi">局势</option>
      <option value="dao">道</option>
      <option value="yishu">艺术</option>
      <option value="ziyuan">资源</option>
    </select>
    <div id="edit">
      <div class="editsm" ref="editref">
        <textarea placeholder="标题" class="title" ref="edittitle"></textarea>
        <textarea
          class="edbody"
          placeholder="输入代码"
          ref="target"
          v-model="edbody"
        >
        </textarea>
        <input type="button" class="save" @click="editSave()" value="保存" />
      </div>
      <div class="kuang" ref="kuang">我是代码kuang检测kuang
       
      </div>
    </div>
    <aSide></aSide>
  </div>
</template>

<script>
import aSide from "@/components/aSide";
import axios from "axios";

export default {
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    var userName = prompt("username");
    var passWord = prompt("password");
    if (userName && passWord) {
      axios({
        method: "post",
        url: "/api/users/login",
        data: {
          username: userName,
          password: passWord,
        },
      }).then((res) => {
        console.log(res);
        if (res.data.msg === "登陆成功") {
          next();
        }
      });
    } else {
      location.reload();
    }
  },
  beforeRouteLeave(to, from, next) {
    //数据保存edit存入写一个方法两边都用

    const answer = window.confirm("是否离开？");
    if (answer) {
      next();
    } else {
      next(false);
    }
  },

  name: "edit",
  components: {
    aSide,
  },
  data() {
    return {
      edbody: "",
    };
  },
  mounted() {
    window.onbeforeunload = () => {
      const answer = window.confirm();
      if (answer) {
        //
        return true;
      } else {
        return false;
      }
    };
  },
  watch: {
    edbody() {
      this.$refs.kuang.innerHTML = "";
      this.$refs.kuang.innerHTML += this.$refs.target.value;
    },
  },

  //--------
  methods: {
    editSave() {
      var itemlin = this.$refs.item.value;
      if (confirm(itemlin + "?")) {
        axios({
          method: "post",
          url: "/api/users/editSave",
          data: {
            item : this.$refs.item.value,
            title: this.$refs.edittitle.value,
            html: this.$refs.target.value,
          },
        }).then((res) => {
          alert(res.data.msg);
        });
      }
    },
  },
};
</script>


<style scoped>
* {
  font-family: "Microsoft YaHei", 微软雅黑;
}
input {
  outline: none;
}
textarea {
  outline: none;
}
aSide {
  position: relative;
  left: 0;
  z-index: 999;
}
#div {
  width: 100%;
  height: 100%;
  position: relative;
  top: 0;
}
#item{
   position: fixed;
   top: 45%;
   left: 17%;
   z-index: 999;
   font-size: 30px;
   background-color: #ffffff00;
}
#item option{
  background-color: #ffffff00;
}
#edit {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
.title {
  line-height: 250%;
  font-size: 32px;
  color: #000;
  width: 80%;
  padding-left: 10%;
  height: 10%;
  border: 0;
  font-weight: bold;
  overflow: hidden;
}
.edbody {
  line-height: 250%;
  font-size: 32px;
  color: #000;
  width: 102%;
  height: 83%;
  overflow: scroll;
  overflow-x: hidden;
}
.editsm {
  overflow: hidden;
  border-radius: 10px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  height: 95%;
  margin: auto;
  background-color: white;
  border: 1px #9999ff solid;
}
.save {
  width: 100%;
  padding: 14px 30px;
  background-color: #9999ff40;
  border: 1px #9999ff solid;
  border-radius: 10px;
}
.kuang {
  position: absolute;
  top: 20%;
  right: 3%;
  height: 50%;
  border: 1px #000 solid;
  width: 20%;

  overflow: scroll;
  overflow: hidden;
}
</style>